<template>
  <div class="process-search">
    <el-form :model="searchForm" inline class="search-form">
      <el-form-item label="工序编号">
        <el-input
          v-model="searchForm.processId"
          placeholder="请输入工序编号"
          clearable
          style="width: 200px;"
        />
      </el-form-item>
      
      <el-form-item label="工序名称">
        <el-input
          v-model="searchForm.processName"
          placeholder="请输入工序名称"
          clearable
          style="width: 200px;"
        />
      </el-form-item>
      
      <el-form-item label="技能要求">
        <el-select
          v-model="searchForm.skillLevel"
          placeholder="请选择技能要求"
          clearable
          style="width: 150px;"
        >
          <el-option label="初级" value="初级" />
          <el-option label="中级" value="中级" />
          <el-option label="高级" value="高级" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="状态">
        <el-select
          v-model="searchForm.status"
          placeholder="请选择状态"
          clearable
          style="width: 120px;"
        >
          <el-option label="启用" value="启用" />
          <el-option label="停用" value="停用" />
        </el-select>
      </el-form-item>
      
      <el-form-item>
        <el-button
          type="primary"
          :loading="loading"
          @click="handleSearch"
        >
          搜索
        </el-button>
        <el-button @click="handleReset">
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  name: 'ProcessSearchComponent',
  props: {
    loading: {
      type: Boolean,
      default: false
    }
  },
  emits: ['search', 'reset'],
  setup(props, { emit }) {
    const searchForm = reactive({
      processId: '',
      processName: '',
      skillLevel: '',
      status: ''
    })

    const handleSearch = () => {
      // 过滤空值
      const searchParams = {}
      Object.keys(searchForm).forEach(key => {
        if (searchForm[key] !== '' && searchForm[key] !== null && searchForm[key] !== undefined) {
          searchParams[key] = searchForm[key]
        }
      })
      emit('search', searchParams)
    }

    const handleReset = () => {
      Object.keys(searchForm).forEach(key => {
        searchForm[key] = ''
      })
      emit('reset')
    }

    return {
      searchForm,
      handleSearch,
      handleReset
    }
  }
}
</script>

<style scoped>
.process-search {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.search-form {
  margin: 0;
}

:deep(.el-form-item) {
  margin-bottom: 0;
  margin-right: 16px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}
</style>
